<template>
  <div>
    <h1 class="title">项目财务执行情况报表</h1>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form :model="form" ref="form" label-width="80px" :inline="false">
          <el-form-item label="项目名称">
            <el-input style="width: 200px;" v-model="form.code"></el-input>
          </el-form-item>
          <el-form-item label="项目期间">
            <el-input style="width: 200px;" v-model="form.name"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <div style="display:flex;align-items: flex-end;height:100px;justify-content: flex-end;">
          <p style="text-align: right;">单位:万元人民币</p>
        </div>
      </el-col>

    </el-row>
    <el-table :data="tableData" show-summary :summary-method="getSummaries" style="width: 100%">
      <el-table-column align="center" type="index" label="行号" fixed>
      </el-table-column>
      <el-table-column align="center" prop="val1" label="科目" width="160px" fixed>
      </el-table-column>
      <el-table-column align="center" label="预算批复">
        <el-table-column align="center" label="合计">
          <template slot-scope="scope">
            {{ (scope.row.val2||0)+(scope.row.val3||0) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="val2" label="中央资金">
        </el-table-column>
        <el-table-column align="center" prop="val3" label="自筹资金">
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="资金到位数">
        <el-table-column align="center" label="合计">
          <template slot-scope="scope">
            {{ (scope.row.val4||0)+(scope.row.val5||0) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="val4" label="中央资金">
        </el-table-column>
        <el-table-column align="center" prop="val5" label="自筹资金">
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="实际支出数">
        <el-table-column align="center" label="合计">
          <template slot-scope="scope">
            {{ (scope.row.val6||0)+(scope.row.val7||0) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="val6" label="中央资金">
        </el-table-column>
        <el-table-column align="center" prop="val7" label="自筹资金">
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="结余">
        <el-table-column align="center" label="合计">
          <template slot-scope="scope">
            {{ (scope.row.val8||0)+(scope.row.val9||0) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="val8" label="中央资金">
        </el-table-column>
        <el-table-column align="center" prop="val9" label="自筹资金">
        </el-table-column>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        code: '', name: ''
      },
      tableData: [
        {
          val1: '一,公司费用',
          val2: 750,
          val3: 62,
          val4: 512,
          val5: 452,
          val6: 464,
          val7: 311,
          val8: 212,
          val9: 145
        },
        {
          val1: '二,差旅费用',
          val2: 620,
          val3: 122,
          val4: 523,
          val5: 124,
          val6: 154,
          val7: 951,
          val8: 812,
          val9: 25
        },
        {
          val1: '二,差旅费用',
          val2: 110,
          val3: 321,
          val4: 521,
          val5: 512,
          val6: 164,
          val7: 571,
          val8: 128,
          val9: 246
        },
        {
          val1: '二,差旅费用',
          val2: 130,
          val3: 222,
          val4: 134,
          val5: 135,
          val6: 146,
          val7: 117,
          val8: 292,
          val9: 285
        },
      ]
    }
  },

  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        if (index === 2) {
          var num = 0
          const values = data.map(item => {
            console.log(item);
            return Number((item.val2 || 0) + (item.val3 || 0))
          });
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 万元';
          return;

        }
        if (index === 5) {
          var num = 0
          const values = data.map(item => {
            console.log(item);
            return Number((item.val4 || 0) + (item.val5 || 0))
          });
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 万元';
          return;

        }
        if (index === 8) {
          var num = 0
          const values = data.map(item => {
            console.log(item);
            return Number((item.val6 || 0) + (item.val7 || 0))
          });
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 万元';
          return;

        }
        if (index === 11) {
          var num = 0
          const values = data.map(item => {
            console.log(item);
            return Number((item.val8 || 0) + (item.val9 || 0))
          });
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 万元';
          return;

        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 万元';
        } else {
          sums[index] = 'N/A';
        }
      });

      return sums;
    }

  }
}
</script>

<style lang="scss" scoped>
.title {
  text-align: center;
}
</style>
